<template>
  <div>
    <van-divider>注册</van-divider>
    <van-field v-model="username" label="用户名" readonly disabled />
    <van-field v-model="nickName" label="昵称" placeholder="昵称" />
    <van-field name="uploader" label="头像">
    <template #input>
      <van-uploader v-model="avatarList" :max-count="1" multiple :after-read="setAvatar" />
    </template>
    </van-field>
    <van-row type="flex" justify="center" style="padding: 20px">
      <van-col span="24" align="center"><van-button @click="register" style="width: 90%; margin: 5px;" type="primary" block="true" round>注册</van-button></van-col>
      <van-col span="24" align="center"><van-button @click="goToLoginPage" style="width: 90%; margin: 5px;" type="primary" block="true" round>去登录</van-button></van-col>
      <van-col span="24" align="center"><van-button style="width: 90%; margin: 5px;" type="danger" block="true" round>退出</van-button></van-col>
    </van-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      username: this.$store.state.user.inputUsername,
      password: this.$store.state.user.inputPassword,
      nickName: '',
      avatarList: [/*{ url: null }*/],
      avatarFile: null,
    };
  },
  methods: {
    register() {
      this.$store.dispatch("user/register", {
        username: this.username,
        nickName: this.nickName,
        password: this.password,
        avatarFile: this.avatarFile,
      })
    },
    setAvatar(file){
      this.avatarFile = file
    },
    goToLoginPage() {
      this.$router.push({path: "/login"});
    }
  },
};
</script>

<style lang="css" scoped>
.login-box {
  height: 100%;
  padding: 40px 20px;
  margin: 20px;
}
</style>
